<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import Map from 'ol/Map';
    import {BingMaps, XYZ} from 'ol/source';
    import View from 'ol/View';
    import {Tile as TileLayer} from 'ol/layer';
    import {fromLonLat} from 'ol/proj'

    export default {
        name: "BingMap",
        data() {
            return {}
        },
        mounted() {

            //实例化Map对象加载地图
            var key = 'Q57tupj2UBsQNQdju4xL~xBceblfTd6icjljunbuaCw~AhwA-whmGMsfIpVhslZyknWhFYq-GvWJZqBnqV8Zq1uRlI5YM_qr7_hxvdgnU7nH';
            //bingsmap其实也是一种地图瓦片，采用的是瓦片方式加载，需要用到瓦片地图渲染
            var roads = new TileLayer({
                source: new BingMaps({key: key, imagerySet: 'Road'})
            });
            var map = new Map({
                layers: [roads],
                target: 'map',
                view: new View({
                    center: fromLonLat([-109, 46.5]),
                    zoom: 6
                })
            });
        },
    }
</script>

<style scoped>

</style>